import React, { Component } from 'react';
import { withRouter, NavLink } from 'react-router-dom';
import '../menu.css'
class Nan extends Component {
    render() {
        /*
        不管是Link还是NavLink都是为了实现路由的跳转--->最后都渲染为a标签
        NavLink:会根据浏览器地址栏中的地址和NavLink指定的to中的地址进行匹配，如果可以匹配上，则会给A标签设置一个class="active"
        
        */ 
        return (
            <>
                <header style={{ background: "lightgreen" }} className="handleBox">
                    <NavLink to='/Custor'>首页</NavLink>
                    <NavLink to='/System'>介绍</NavLink>
                </header>
            </>
        );
        console.log(this.props)
    }

}

/*
Nan本身不受路由管控，默认属性中没有history/location/match等内容
想让其变为受路由管控或者想要这些属性，只需要基于react-router-dom中的withRouter高阶组件代理即可。
用withRouter代理的组件必须包含在HashRouter或者BrowserRouter双标签中
*/
export default withRouter(Nan);